<!--
  @author:  long
  @date:    2023/4/7
  @file:    xx
  @require:
-->
<template>
  <div>
    <!--   考评弹窗   -->
    <el-dialog
      v-model="dialogTableVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="appraisalDialog"
      @close="closeDialog"
      width="60%"
    >
      <template #title>
        <div class="text-2xl font-semibold">绩效考核规范说明</div>
      </template>
      <div class="tips">
        <template v-if="assessCountInfo.inAssessPeriod">
          <el-row
            class="tip"
            v-if="
              assessCountInfo.ucselfIndicatorsCount * 1 > 0 ||
              assessCountInfo.selfIndicatorsCount * 1 > 0
            "
          >
            <el-col :span="3" class="flex items-center justify-center">
              <div class="title">自评</div>
            </el-col>
            <el-col :span="21">
              <div class="mb-5 text-xl font-semibold">
                当前时间为{{ date }}，正处在{{
                  assessCountInfo.selfAssessDate
                }}的考核时间范围内。
                <el-button
                  type="primary"
                  plain
                  link
                  @click="switchModule('evaluationList', 'self')"
                  >考评列表
                </el-button>
              </div>
              <div class="my-3">
                <el-row class="flex items-center">
                  <el-col :span="6">
                    <div class="mb-2 text-lg">
                      待考核指标：
                      <span class="px-1 text-2xl" style="color: #409eff">
                        {{ assessCountInfo.ucselfIndicatorsCount }}
                      </span>
                      条
                    </div>
                    <div class="mb-2 text-lg">
                      已考评：
                      <span class="px-1 text-2xl" style="color: #409eff">
                        {{ assessCountInfo.selfIndicatorsCount }}
                      </span>

                      条
                    </div>
                  </el-col>
                  <el-button
                    type="primary"
                    @click="switchModule('scoreTable', 'self')"
                    >去考评
                  </el-button>
                </el-row>
              </div>
            </el-col>
            <el-divider />
          </el-row>

          <el-row class="tip" v-if="assessCountInfo.assessor">
            <el-col :span="3" class="flex items-center justify-center">
              <div class="title">他评</div>
            </el-col>
            <el-col :span="21">
              <div class="mb-5 text-xl font-semibold">
                当前时间为{{ date }}，正处在{{
                  assessCountInfo.otherAssessDate
                }}的考核时间范围内。
                <el-button
                  type="primary"
                  plain
                  link
                  @click="switchModule('evaluationList', 'other')"
                  >考评列表
                </el-button>
              </div>
              <div class="mb-1">
                <el-row class="flex items-center" :gutter="20">
                  <el-col
                    :span="12"
                    class="border-r-1 border-r-solid border-gray-300"
                  >
                    <el-row class="flex items-center">
                      <el-col :span="12">
                        <div class="mb-2 text-xl font-semibold">按指标考评</div>
                        <div class="mb-2 text-lg">
                          待考核指标：
                          <span class="px-1 text-2xl" style="color: #409eff">
                            {{ assessCountInfo.ucindicatorsCount }}
                          </span>
                          条
                        </div>
                        <div class="mb-2 text-lg">
                          已考评指标：
                          <span class="px-1 text-2xl" style="color: #409eff">
                            {{ assessCountInfo.indicatorsCount }}
                          </span>
                          条
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-button
                          type="primary"
                          @click="switchModule('indicator', '')"
                          >按指标去考评
                        </el-button>
                      </el-col>
                    </el-row>
                  </el-col>

                  <el-col :span="12">
                    <el-row class="flex items-center">
                      <el-col :span="12">
                        <div class="mb-2 text-xl font-semibold">按人员考评</div>
                        <div class="mb-2 text-lg">
                          待考核人数：
                          <span class="px-1 text-2xl" style="color: #409eff">
                            {{ assessCountInfo.ucpersonCount }}
                          </span>
                          人
                        </div>
                        <div class="mb-2 text-lg">
                          已考评人数：
                          <span class="px-1 text-2xl" style="color: #409eff">
                            {{ assessCountInfo.personCount }}
                          </span>
                          人
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-button
                          type="primary"
                          @click="switchModule('scoreTable', 'other')"
                          >按人员去考评
                        </el-button>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <div></div>
              </div>
            </el-col>
          </el-row>
          <el-row
            class="tip flex items-center pb-15"
            v-if="
              assessCountInfo.ucselfIndicatorsCount * 1 == 0 &&
              assessCountInfo.selfIndicatorsCount * 1 == 0 &&
              !assessCountInfo.assessor
            "
          >
            <el-col :span="3" class="flex items-center justify-center">
              <div class="title">提醒</div>
            </el-col>
            <el-col :span="21">
              <div class="text-xl font-semibold">
                该考评时段不存在待考评记录！
              </div>
            </el-col>
          </el-row>
        </template>
        <el-row class="tip flex items-center pb-15" v-else>
          <el-col :span="3" class="flex items-center justify-center">
            <div class="title">提醒</div>
          </el-col>
          <el-col :span="21">
            <div class="text-xl font-semibold">
              当前时间为{{
                date
              }}，不在该月考核时间范围内，没有待考核数据待考评。
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <score-table
      v-if="moduleType == 'scoreTable'"
      :type="type"
      :userId="userId"
      @switchModule="switchModule"
      :info="info"
    />
    <evaluation-list
      v-if="moduleType == 'evaluationList'"
      @switchModule="switchModule"
      :type="type"
      :mode="mode"
      :assessor="assessCountInfo.assessor"
    />
    <!--   按照指标   -->
    <IndicatorEvaluation
      v-if="moduleType == 'indicator'"
      @switchModule="switchModule"
      :info="info"
    />
  </div>
</template>

<script setup name="Appraisal">
import { getCurrentInstance } from 'vue'
import { format } from 'date-fns'

import ScoreTable from '@/views/officeManage/performanceManage/appraisal/modules/scoreTable.vue'
import EvaluationList from '@/views/officeManage/performanceManage/appraisal/modules/evaluationList.vue'
import IndicatorEvaluation from '@/views/officeManage/performanceManage/appraisal/modules/indicator.vue'
import useTagsViewStore from '@/store/modules/tagsView'
import { getbizAssessCount } from '@/api/officeManage/appraisal'
import useUserStore from '@/store/modules/user'
import useAppStore from '@/store/modules/app'

const userStore = useUserStore()
const appStore = useAppStore()
const router = useRouter()
const { proxy } = getCurrentInstance()
const data = reactive({
  date: format(new Date(), 'yyyy年MM月dd日'),
  assessCountInfo: {},
  flag: '',
  dialogTableVisible: true,
  moduleType: '',
  type: '', //self 自评  other 他评
  userId: '',
  info: {},
  mode: ''
})
const {
  userId,
  dialogTableVisible,
  moduleType,
  type,
  flag,
  assessCountInfo,
  date,
  info,
  mode
} = toRefs(data)

/**
 * @description: 关闭弹窗
 */
const closeDialog = () => {
  if (flag.value == '') {
    useTagsViewStore().delView(router.currentRoute.value)
    router.go(-1)
  }
}

function toggleSideBar() {
  appStore.sidebar.opened = false
}

/**
 * @description: 跳转到考评列表
 * @param {String} module 跳转的模块
 */
const switchModule = (module, t, row) => {
  console.info('type', t)
  if (module == 'scoreTable' && t == 'self') {
    if (
      (assessCountInfo.value.ucselfIndicatorsCount == '0' ||
        assessCountInfo.value.ucselfIndicatorsCount == null) &&
      (assessCountInfo.value.selfIndicatorsCount == '0' ||
        assessCountInfo.value.selfIndicatorsCount == null)
    ) {
      proxy.$modal.msgWarning('没有考核数据待考评！')
      return
    }
    toggleSideBar()
  }
  if (module == 'indicator') {
    if (
      (assessCountInfo.value.ucindicatorsCount == '0' ||
        assessCountInfo.value.ucindicatorsCount == null) &&
      (assessCountInfo.value.indicatorsCount == '0' ||
        assessCountInfo.value.indicatorsCount == null)
    ) {
      proxy.$modal.msgWarning('没有指标数据待考评！')
      return
    }
    toggleSideBar()
  }
  if (module == 'scoreTable' && t == 'other') {
    if (
      (assessCountInfo.value.ucpersonCount == '0' ||
        assessCountInfo.value.ucpersonCount == null) &&
      (assessCountInfo.value.personCount == '0' ||
        assessCountInfo.value.personCount == null)
    ) {
      proxy.$modal.msgWarning('没有人员待考评！')
      return
    }
    toggleSideBar()
  }
  flag.value = '1'
  type.value = t
  moduleType.value = module
  switch (module) {
    case 'scoreTable':
      //自评
      if (t == 'other') {
        userId.value = ''
      }
      if (row) {
        info.value = row
      }
      break
    //   综合列表
    case 'evaluationList':
      if (row == 'target') {
        mode.value = 'target'
      } else {
        mode.value = 'person'
      }
      break
    //按指标考评页面
    case 'indicator':
      //   按指标考评
      console.info('row', row)
      if (row) {
        info.value = row
      }
      break
    default:
      break
  }

  dialogTableVisible.value = false
}
/**
 * @description: 获取考评状态
 */
const judgeStatus = () => {
  let params = {
    userId: userStore.user.userId
  }
  getbizAssessCount(params).then(res => {
    assessCountInfo.value = res.data
  })
}

/**
 * 初始化
 */
const init = () => {
  judgeStatus()
}
init()
</script>

<style scoped lang="scss">
::v-deep .appraisalDialog {
  margin-top: 16vh !important;

  .el-dialog__body {
    min-height: 30vh !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  border-radius: 10px;

  .el-dialog__header {
    @apply py-5 mr-0 border-b-1 border-b-solid border-gray-200;
  }

  .el-dialog__headerbtn {
    top: 0;
  }
}

.tips {
  @apply tracking-widest;
  .tip {
    @apply mb-1;
    .title {
      color: #ff7f00;
      border-color: #ff7f00;
      @apply font-semibold rounded-lg p-3 border-solid border-2;
    }
  }
}
</style>
